<template>
  <div class="dailyWorkContainer">
    <!-- 日报头 -->
    <el-row>
      <el-col :span="24">
        <div class="title">
          <div class="left">
            <el-button type="primary" size="mini" v-hasPermi="['system:work:add']" v-if="dailyWork.focus" @click="submit">提交
            </el-button>
          </div>
          <div class="right">
            <span class="writer">{{dailyWork.nickName}}</span>
            <span class="day">{{dailyWork.createTime}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 今日完成 -->
    <el-row type="flex">
      <el-col :span="6">
        <div class="column">
          <span>今天完成</span>
        </div>
      </el-col>
      <el-col :span="18">
        <editor v-if="modifytTodayCompleteContent" v-model="dailyWork.todayCompleteContent" type="textarea"
          placeholder="请输入内容" :min-height="200" @text-change="textChange" />
        <div v-else class="content" v-html="dailyWork.todayCompleteContent" @dblclick="todayCompleteContentHandle">
        </div>
      </el-col>
    </el-row type="flex">
    <!-- 明日计划 -->
    <el-row type="flex">
      <el-col :span="6">
        <div class="column">
          <span>明天计划完成</span>
        </div>
      </el-col>
      <el-col :span="18">
        <editor v-if="modifyTomorrowPlan" v-model="dailyWork.tomorrowPlan" type="textarea" placeholder="请输入内容"
          :min-height="200" @text-change="textChange" />
        <div v-else class="content" v-html="dailyWork.tomorrowPlan" @dblclick="tomorrowPlanHandle">
        </div>
      </el-col>
    </el-row>
    <!-- 存在问题 -->
    <el-row type="flex">
      <el-col :span="6">
        <div class="column">
          <span>存在问题</span>
        </div>
      </el-col>
      <el-col :span="18">
        <editor v-if="modifyProblems" v-model="dailyWork.problems" type="textarea" placeholder="请输入内容" :min-height="200"
          @text-change="textChange" />
        <div v-else class="content" v-html="dailyWork.problems" @dblclick="problemsHandle">
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
  export default {
    props: {
      dailyWork: {
        type: Object,
        default: {}
      },
      index: Number
    },
    data() {
      return {
        modifytTodayCompleteContent: false,
        modifyTomorrowPlan: false,
        modifyProblems: false,
        focus: false,
        changed: false
      }
    },
    watch: {
      //这段监听日报对象更改不起作用
      // dailyWork: {
      //   handler: function(val, oldVal) {
      //     // console.log(val)
      //     if (!val.focus) {
      //       this.reset()
      //     }
      //   },
      //   immediate: true,
      //   deep: true
      // }
    },
    created() {},
    methods: {
      reset() {
        this.modifytTodayCompleteContent = false,
          this.modifyTomorrowPlan = false,
          this.modifyProblems = false
      },
      todayCompleteContentHandle() {
        this.dailyWork.focus = true
        this.$emit("setSelectIndex", this.index)
        this.modifytTodayCompleteContent = true
        this.modifyTomorrowPlan = false
        this.modifyProblems = false
      },
      tomorrowPlanHandle() {
        this.dailyWork.focus = true
        this.$emit("setSelectIndex", this.index)
        this.modifytTodayCompleteContent = false
        this.modifyTomorrowPlan = true
        this.modifyProblems = false
      },
      problemsHandle() {
        this.dailyWork.focus = true
        this.$emit("setSelectIndex", this.index)
        this.modifytTodayCompleteContent = false
        this.modifyTomorrowPlan = false
        this.modifyProblems = true
      },
      textChange() {
        this.changed = true;
      },
      submit() {
        this.dailyWork.focus = false
        this.$emit("submit", this.dailyWork)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dailyWorkContainer {
    margin: 0 auto;
    width: 60%;
    border-top: black 1px solid;
    border-left: black 1px solid;
    border-right: black 1px solid;
    margin-bottom: 20px;

    .title {
      display: relative;
      background-color: black;
      color: white;
      // text-align: right;
      height: 35px;
      line-height: 35px;
      margin-bottom: 0px;
      .left{
        display: inline-block;
        margin-left: 10px;
      }

      .right {
        display: inline-block;
        float: right;
        .day {
          font-weight: bold;
          margin-left: 20px;
          margin-right: 10px;
        }
      }
    }

    .column {
      width: 100%;
      min-height: 100px;
      height: 100%;
      border-right: black 1px solid;
      border-bottom: black 1px solid;
      text-align: center;
      display: flex;
      align-items: center;

      span {
        margin: 0 auto;
      }
    }

    .content {
      min-height: 100px;
      border-bottom: black 1px solid;
      padding: 5px;
    }
  }
</style>
